<template>
  <div id="books">
    <div class="alert alert-success" role="alert" v-show="submit">
      Your order has been submitted,Thank you!
    </div>
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Price</th>
        <th scope="col">Count</th>
        <th scope="col">Sum</th>
        <th scope="col">Control</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(abook,idx) in book">
        <th scope="row">{{abook.bookId}}</th>
        <td>{{ abook.name }}</td>
        <td>{{ abook.price.toFixed(2) }}</td>
        <td>{{ bookCnt[idx] }}</td>
        <td>{{(abook.price * bookCnt[idx]).toFixed(2)}}</td>
        <td>
          <div class="btn-group"  aria-label="Basic example">
            <button type="button" class="btn btn-primary" @click="add(idx)"><img src="../assets/plus.svg" alt=""></button>
            <button type="button" class="btn btn-primary" @click="minus(idx)"><img src="../assets/minus.svg" alt=""></button>
          </div>
        </td>
      </tr>
      <tr>
        <td id="total" colspan="7"><strong>total:{{total.toFixed(2)}}</strong></td>
      </tr>
      <tr>
        <td colspan="5"></td>
        <td>
          <button type="button" class="btn btn-success" @click="submitOrder">Sumbit</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

</template>

<script>
import axios from 'axios';
import {ref} from 'vue';
import {useStore} from "vuex";

export default {

  name: "books",
  setup(){
    const store = useStore();
    store.dispatch("Load");

    let submit = ref(false);
    let total = ref(0);
    let book = ref([]);
    let bookCnt = ref([]);
    const add = (idx)=>{
      bookCnt.value[idx]++;
      updateTotal();
    }
    const minus = (idx)=>{
      if(bookCnt.value[idx] > 0)
        bookCnt.value[idx]--;
      updateTotal()
    }
    const updateTotal = ()=>{
      total.value = 0;
      for(let i = 0; i < book.value.length; i++){
        total.value += book.value[i].price * bookCnt.value[i];
      }
    }
    axios({
      method:"POST",
      async:false,
      url:"GetAllBookServlet",
    }).then((res)=>{
      book.value = res.data;
      for(let i = 0; i < book.value.length; i++){
        bookCnt.value.push(0);
      }
      store.dispatch("Finished");
    });
    const submitOrder = ()=>{
      store.dispatch("Load")
      axios({url:"CreateOrderServlet",params:{receiver:1}}).then(()=>{
        let idx = 0;
        let newparams = {};
        for (let i = 0; i < bookCnt.value.length; i++) {
          if(bookCnt.value[i] !== 0){
            let param1 = "bookId" + idx;
            let param2 = "amount" + idx;
            idx++;
            newparams[param1] = book.value[i].bookId;
            newparams[param2] = bookCnt.value[i];
          }
        }
        return axios({
          url:"AddItemServlet",
          params:newparams
          });
      }).then(()=>{
        return axios({
          url:"SubmitOrderServlet"
        })
      }).then(()=>{
        submit.value = true;
        bookCnt.value.splice(0,book.value.length)
        for(let i = 0; i < book.value.length; i++){
          bookCnt.value.push(0);
        }
        updateTotal();
        store.dispatch("Finished")
      })
    }
    return{
      book,
      bookCnt,
      add,
      minus,
      total,
      submitOrder,
      submit
    }
  },
}
</script>

<style scoped>
td{
  line-height: 55px
}
th{
  line-height: 55px
}
#total{
  font-size: 30px;
}
table{
  width: 80%;
  margin: 0 auto;
}
</style>